<template>
  <h3>这是一个HelloWorld组件</h3>
  <p>接收到父组件中的数据:{{ num }}==={{ msg }}</p>
  <hr />
  <p>改造后的数据:{{ info }}==={{ count }}</p>
</template>

<script>
import { toRefs } from "vue"
export default {
  name: "HelloWorld",
  props: ["msg", "num"],
  setup(props) {
    // toRef 转换成响应式
    console.log(props)
    // 此时这个不是响应的,count的值
    // 这时我们可以用toref转换成响应式
    // 由于setup中不能直接解构props,会破坏响应式,
    // 所以我们在下面解构
    let { msg, num } = toRefs(props)
    return { count: num, info: msg }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
